<template>
  <div>
    <div class="filter_container">
      <el-form :inline="true" :model="Complaintform">
        <el-form-item label="城市">
          <el-select v-model="Complaintform.cityId" placeholder="请选择城市" size="small" style="width: 100px;"
            @change="handleCityComplaint" @keydown.native="selectBlur($event)">
            <el-option v-for="(house,citykey) in cityList" :key="citykey" :label="house.deptName" :value="house.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="后台单号">
          <el-input v-model.trim="Complaintform.xmbzNo" size="small" style="width: 160px"
            @keyup.enter.native="handleFiltercomplaint()" clearable placeholder="请输入后台单号"></el-input>
        </el-form-item>
        <el-form-item label="平台单号">
          <el-input v-model.trim="Complaintform.platformNo" size="small" style="width: 140px"
            @keyup.enter.native="handleFiltercomplaint()" clearable placeholder="请输入平台单号"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model.trim="Complaintform.operator" size="small" style="width: 130px"
            @keyup.enter.native="handleFiltercomplaint()" clearable placeholder="请输入申请人"></el-input>
        </el-form-item>
        <el-form-item label="跟进人">
          <el-input v-model.trim="Complaintform.personUpdate" size="small" style="width: 130px"
            @keyup.enter.native="handleFiltercomplaint()" clearable placeholder="请输入跟进人"></el-input>
        </el-form-item>
        <el-form-item label="处理人">
          <el-input v-model.trim="Complaintform.personDispose" size="small" style="width: 130px"
            @keyup.enter.native="handleFiltercomplaint()" clearable placeholder="请输入处理人/结案人"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model.number="Complaintform.phone" onkeyup="value=value.replace(/[^\-?\d.]/g,'')"
            onafterpaste="value=value.replace(/[^\-?\d.]/g,'')" @keyup.enter.native="handleFiltercomplaint()"
            maxlength="11" size="small" style="width: 140px" clearable placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select ref="handleStateRef" v-model="Complaintform.handleState" placeholder="请选择处理状态" clearable
            size="small" style="width: 140px;" @keydown.native="selectBlur($event)">
            <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in dealstatusList" :key="index"
              size="small"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="投诉等级">
          <el-select ref="handleStateRef" v-model="Complaintform.complaintLevel" placeholder="请选择投诉等级" clearable
            size="small" style="width: 140px;" @keydown.native="selectBlur($event)">
            <el-option :label="item.dictValue" :value="item.dictKey" v-for="(item,index) in relationtype" :key="index"
              size="small"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门失误类型">
          <XmCascader size="small" clearable v-model="addSelectList" :options="errorTypeList" :props="{multiple: true, checkStrictly: true}"
            separator=">" placeholder="请选择部门失误类型" style="width: 280px;" filterable></XmCascader>
        </el-form-item>
        <el-form-item label="创建工单时间">
          <el-date-picker v-model="Launchdate3" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm" :clearable="false" align="right" size="small"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleFiltercomplaint()" icon="el-icon-search" size="small">查询
          </el-button>
          <el-button type="success" plain @click="handlAddcomplaint()" icon="el-icon-plus" size="small">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table :data="ComplaintList" border style="width: 100%" header-row-class-name="header-row-class-name"
        cell-class-name="table-cell-class-name">
        <el-table-column label="等级" prop="complaintLevelName" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="getcomplaintLevelClass(scope.row.complaintLevel )">{{scope.row.complaintLevelName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="城市" prop="cityName" width="80" align="center">
        </el-table-column>
        <el-table-column label="后台单号" prop="xmbzNo" width="80" align="center">
        </el-table-column>
        <el-table-column label="蛋糕款式" prop="orderTime" width="180" align="center">
          <template slot-scope="scope">
            <p v-for="(child,index) in scope.row.orderDetailCakes" :key="index" style="display: block;">
              <span>{{child.goodsName}}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="配送时间" prop="deliveryTime" width="210" align="center">
          <template slot-scope="scope">
            {{scope.row.deliveryStartTime}}~{{scope.row.deliveryEndTime.split(' ')[1]}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="90" align="center">
        </el-table-column>
        <el-table-column label="结案时间" prop="endTime" width="90" align="center">
        </el-table-column>
        <el-table-column label="收货人电话" prop="receiverPhone" width="100" align="center">
        </el-table-column>
        <el-table-column label="联系电话" prop="phone" width="100" align="center">
        </el-table-column>
        <el-table-column label="处理状态" prop="handleStateName" width="80" align="center">
        </el-table-column>
        <el-table-column label="投诉内容" prop="complaintContent" min-width="240">
          <template slot-scope="scope">
            <pre>{{scope.row.complaintContent}}</pre>
          </template>
        </el-table-column>
        <el-table-column label="处理结果" prop="processingResults" width="140" align="center"></el-table-column>
        <el-table-column label="订单渠道" prop="orderChannel" width="80" align="center">
        </el-table-column>
        <el-table-column label="投诉渠道" prop="complaintChannelName" width="80" align="center">
        </el-table-column>
        <el-table-column label="部门失误类型" prop="responsibleDepartmentErrorText" width="300" align="center">
        </el-table-column>
        <el-table-column width="300" align="center" label='图片附图' :key='3'>
          <template slot-scope="scope">
            <div class="photoWallboard">
              <img :src="item" v-for="(item,index) in changeExtJsoncomplaint(scope.row.extJson)" :key="index"
                class="showExplain" @click="handBigPhoto(item)">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请人" prop="operator" width="80" align="center">
        </el-table-column>
        <el-table-column label="责任人" prop="personLiable" width="80" align="center">
        </el-table-column>
        <el-table-column label="跟进人" prop="personUpdate" width="80" align="center">
        </el-table-column>
        <el-table-column label="处理人" prop="personDispose" width="80" align="center">
        </el-table-column>
        <el-table-column label="投诉次序" prop="count" width="80" align="center" fixed="right">
        </el-table-column>
        <el-table-column label="操作" prop="complaintLevel" width="300" align="center" fixed='right'>
          <template slot-scope="scope">
            <el-button size="mini" plain @click="headleComplaintListDetils(scope.row, scope.index, 'complaintListEdit')"
              class="mr-2 mb-5"
              v-xmbz-permission="'classification_complaint_view'">查看</el-button>
            <el-button size="mini" plain @click="changeComplaintListEdit(scope.row, scope.index, 'complaintListEdit')"
              class="mr-2 mb-5"
              v-xmbz-permission="'classification_complaint_edit'">编辑</el-button>
            <el-button size="mini" type="warning" plain @click="handleAppeal(scope.row)"
              class="mr-2 mb-5"
              v-xmbz-permission="'classification_complaint_appeal'">申诉</el-button>
            <el-button size="mini" plain type="danger" @click="handleDelete(scope.row)"
              class="mr-2 mb-5"
              v-xmbz-permission="'classification_complaint_delete'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="Complaintform.page" :limit.sync="Complaintform.size"
        @pagination="getComplaintList" />
    </div>

    <addComplaintDialog ref="addComplaintDialog" @getList="getComplaintList" :errorTypeList="errorTypeList"></addComplaintDialog>
    <editComplaintDialog ref="editComplaintDialog" :errorTypeList="errorTypeList" @getList="getComplaintList"></editComplaintDialog>
    <addProdutAppealDialog ref="addProdutAppealDialog"></addProdutAppealDialog>

    <!-- 显示图片 -->
    <el-dialog :visible.sync="isImgShow" width="50%">
      <img :src="src" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script>
import addComplaintDialog from './addComplaintDialog.vue';
import editComplaintDialog from './editComplaintDialog.vue';
import addProdutAppealDialog from './addProdutAppealDialog'
import { OrderComplaintPage, relationtype, deleteWorkOrderComplaint } from '@/api/workorder'
import Pagination from "@/components/Pagination" // 分页

export default {
  props: {
    cityList: {
      type: Array,
      default: () => []
    },
    dealstatusList: {
      type: Array,
      default: () => []
    },
    errorTypeList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      Complaintform: {
        complaintLevel: '', // 投诉等级
        page: 1, //页码
        size: 10, //每页
        cityId: "",
        xmbzNo: "", //订单号
        operator: "", //申请人
        platformNo: "", //第三方平台单号
        phone: "", //手机号
        handleState: "", // 处理状态
        workOrderStartTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(), //配送开始时间
        workOrderEndTime: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString(), //配送结束时间
        responsibleDepartment: "", //责任部门
        departmentErrorType: "" //失误类型
      },
      Launchdate3: [
        this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
        this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59")
          .toString()
      ],
      addSelectList: [],  // 添加投诉内容数组
      total: 0,
      ComplaintList: [],
      src: '',
      isImgShow: false,
      relationtype: [],  // 投诉字典
      configTips: null,  // 内容
    };
  },
  watch: {
    dealstatusList(next) {
      console.log(next)
    }
  },
  methods: {
    init() {
      this.setDefaultCity()
      this.getComplaintList()
      this.getcomplaint()   //投诉
    },
    handleFiltercomplaint() {
      //投诉查询
      this.Complaintform.page = 1
      if (this.Launchdate3) {
        this.Complaintform.workOrderStartTime = this.dayjs(this.Launchdate3[0])
          .format("YYYY-MM-DD HH:mm:00")
          .toString()
        this.Complaintform.workOrderEndTime = this.dayjs(this.Launchdate3[1])
          .format("YYYY-MM-DD HH:mm:59")
          .toString()
      }
      var time1 = Date.parse(this.Complaintform.workOrderStartTime)
      var time2 = Date.parse(this.Complaintform.workOrderEndTime)
      //讲两个时间相减，求出相隔的天数
      var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24
      if (dayCount > 31) {
        this.$message({
          showClose: true,
          message: "时间间隔不可超过31天",
          type: "warning"
        })
      } else {
        this.getComplaintList()
      }
    },
    async getComplaintList() {
      //投诉列表
      this.Complaintform['responsibleDepartmentErrors'] = this.addSelectList.map(item => item[item.length - 1])  // 添加 多个查询
      const response = await OrderComplaintPage(this.Complaintform)
      response.data.data.rows.map(item => {
        if (item.compensationMethod) {
          item.compensationMethod = item.compensationMethod.split(",")
        }
      })
      this.ComplaintList = response.data.data.rows
      this.total = response.data.data.total
    },
    handlAddcomplaint() {
      this.$refs.addComplaintDialog.show()
    },
    setDefaultCity() {
      this.Complaintform.cityId = this.cityList && this.cityList.length && this.cityList[0].id
    },
    handleCityComplaint(data) {
    },
    changeExtJsoncomplaint(list) {
      if (!list) {
        return
      }
      return JSON.parse(list).img
    },
    handBigPhoto(src) {
      this.src = src
      this.isImgShow = true
    },
    headleComplaintListDetils(row) {
      this.$refs.editComplaintDialog.show(row, 'view')
    },
    // 投诉工单事件
    changeComplaintListEdit(row) {
      this.$refs.editComplaintDialog.show(row, 'update')
    },
    getcomplaint() {
      relationtype({ 'code': 'complaint_grade' }).then(res => {
        this.relationtype = res.data.data
      })
      // 获取投诉字典
    },
    getcomplaintLevelClass (complaintLevel) {
      if (complaintLevel > 3) {
        return 'danger'
      }
      if (complaintLevel > 2) {
        return 'warning'
      }
      return 'info'
    },
    handleAppeal(data) {
      this.$refs.addProdutAppealDialog.show({data})
    },
    handleDelete(data) {
      this.$confirm("请确定是否删除该条记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteWorkOrderComplaint([data.id]).then(res => {
          this.$message({
            type: 'success',
            message: `操作成功！`
          })
          this.getComplaintList()
        })
      })
    },
  },
  mounted() {
    this.init()
  },
  components: {
    addComplaintDialog,
    editComplaintDialog,
    addProdutAppealDialog,
    Pagination
  }
};
</script>
<style lang="scss" scoped>
.photoWallboard {
  .showExplain {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>